<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="zepto.min.js"></script>
    <script src="touch.js"></script>
    <script src="iscroll-probe.js"></script>
    <script src="ui.js"></script>

    <title>Document</title>
</head>
<body>
    <div class="list" style="
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
">
        <div class="list-group">
            <div class="list-item ellipsis list-item-icon">
                <img src="images/1.jpg" alt="">
                Apple 苹果 iPhone 6s Plus (A1699) 16G 玫瑰金色 移动联通电信4G 全网通手机
            </div>
            <div class="list-item ellipsis list-item-icon">
                <img src="images/1.jpg" alt="">
                Letv 乐视1S 乐1S 移动联通双4G 双卡双待 16GB 金</div>
            <div class="list-item ellipsis">NOKIA/诺基亚 2610 nokia 2610 经典诺基亚直板手机 学生备用老人手机 诺基亚低端功能机</div>
            <div class="list-item ellipsis">华为 Mate8 NXT-TL00 3GB+32GB版 移动定制 月光银</div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
            <div class="list-item ellipsis">锤子 坚果 32GB 红色 移动联通4G手机 双卡双待></div>
        </div>
    </div>
    <script>
        var loadingStep = 0;
        var iscroll = new IScroll('.list', {
            probeType: 3,
        });

        iscroll.on('scroll', function() {
            if(this.y > 40){//下拉刷新操作
                $(".pulldown-tips").hide();
                pullDown.addClass("refresh").show();
                pullDownLabel.text("松手刷新数据");
                loadingStep = 1;
                myScroll.refresh();
            }else if(this.y < (this.maxScrollY - 14)){//上拉加载更多
                pullUp.addClass("refresh").show();
                pullUpLabel.text("正在载入");
                loadingStep = 1;
                pullUpAction();
            }
        });
        iscroll.on('scrollEnd', function() {
            if(loadingStep == 1){
                if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
                    pullDown.removeClass("refresh").addClass("loading");  
                    pullDownLabel.text("正在刷新");
                    loadingStep = 2;
                    pullDownAction();
                }
            }
        });
    </script>
</body>
</html>
